<script setup lang="ts">
	// * 商家销售统计图表组件
	import * as echarts from 'echarts'
	import { ref, onMounted, reactive, onUnmounted } from 'vue'
	// 导入主题并注册
	import ysTheme from '@/assets/theme/ys.json'
	echarts.registerTheme('ys', ysTheme)

	// 容器实例
	const fullRef = ref<HTMLDivElement>()
	// 图表状态数据
	const state = reactive({
		chartsData: []
	})

	// echarts实例
	let myEcharts: echarts.ECharts = null

	// * 初始化图表
	const initCharts = () => {
		// 初始化
		myEcharts = echarts.init(fullRef.value, 'ys')
		// 配置
		const option: echarts.EChartsOption = {}
		// 设置配置
		myEcharts.setOption(option)
	}

	// * 获取数据
	const getData = async () => {
		// 更新配置
		updateCharts()
	}

	// * 更新配置项
	const updateCharts = () => {
		// 配置项
		const updateOption: echarts.EChartsOption = {}
		// 设置配置项
		myEcharts.setOption(updateOption)
	}

	// * 分辨率适配
	const screenAdapter = () => {
		// 设置配置
		const adapterOption: echarts.EChartsOption = {}
		// 更新配置
		myEcharts.setOption(adapterOption)
		myEcharts.resize()
	}

	// 实例挂载后（渲染后）
	onMounted(() => {
		initCharts()
		getData()
		window.addEventListener('resize', screenAdapter)
		screenAdapter()
	})

	// 实例销毁后
	onUnmounted(() => {
		window.removeEventListener('resize', screenAdapter)
	})
</script>

<template>
	<div class="full_container" ref="fullRef"></div>
</template>

<style scoped lang="scss"></style>
